<template>
	
	<view class='orderDetail'>
		<div style="height: 300px; position: relative">
		    <iframe :src="map"  scrolling="no" frameborder="0" style="height: 300px;width:100%;"></iframe>
		</div>
		<u-popup :show="addCarDialog" mode="top" >
			<view class='addCar' style="padding: 5%;border-radius: 5px;">
				<view class='carShop  jBetween_aCenter' >
					<view class='orderId dFlex jBetween_aCenter'>
						<view class='label'>{{$t('orderDetail.orderId')}} <text>{{detail.order_sn}}</text></view>
						<view class='copyBtn dFlex jCenter_aCenter jBetween_aCenter'>
							<u-icon name="file-text" size='25px' color='#f8e801' @click="$tools.copy(detail.order_sns)"></u-icon>
							
						</view>
					</view>
					<view class='shopInfo'  style="margin-top: 20px;">
						<view class='shopName' style="width:100%;">
							{{detail.pay_alert}}
						</view>
					</view>
				</view>
				<view class='btns dFlex jBetween_aCenter' style="margin-top: 30px;">
					<view class='btns2'>
						<view class='saveBtn' style="color:#000" @click='payorder(detail)'>{{$t('pay.dopay')}}</view>
					</view>
					<view class='btns2' @click='addCarDialog = false'>
						<view class='saveBtn' style="color:#000" >{{$t('orderDetail.know')}}</view>
					</view>
					<!-- <u-button @click="payorder(detail)" type="primary"  color="#f8e801" :text="$t('pay.dopay')"></u-button>
					<u-button :text="$t('orderDetail.know')" 
						style="color:#f8e801;border-color:#f8e801;"></u-button> -->
				</view>
			</view>
		</u-popup>
		<view class='orderId dFlex jBetween_aCenter'>
			<view class='label'>{{$t('orderDetail.orderId')}} <text>{{detail.order_sn}}</text></view>
			<view class='copyBtn dFlex jCenter_aCenter jBetween_aCenter'>
				<u-icon name="file-text" size='25px' color='#f8e801' @click="$tools.copy(detail.url)"></u-icon>
				<image @click="goKefu" src="../static/images/kefu.png"
					style="width:20px;height:20px;margin-left: 10px;margin-right: 10px;margin-top: -3px;"></image>
			</view>
		</view>
		<view class='address' v-if="detail.address">
			<view class='label'>{{$t('orderDetail.delivery_address')}}</view>
			<view class='info'>
				<view class='user'>{{detail.consignee}}</view>
				<view class='add'>{{detail.address}}</view>
				<view class='tel'>{{detail.mobile}}</view>
			</view>
		</view>
		<view class='wuliu'>
			<u-steps :current="detail.order_status" class='wuliu_content' direction="column" activeColor='#f8e801' style="padding-bottom: 10px;">
				<u-steps-item :title="$t('orderDetail.wait_pay')" v-if="detail.order_status>0">
					<div class='step_content' slot='desc'>
						{{$t('orderDetail.wait_pay_text')}}
					</div>
				</u-steps-item>
				<view class='btns2'  v-if="detail.order_status==1" style="margin:10px;">
					<view class='saveBtn' style="color:#000" @click='payorder(detail)'>{{$t('pay.dopay')}}</view>
				</view>
				<u-steps-item :title="$t('orderDetail.wait_express')" v-if="detail.order_status>1">
					<div class='step_content' slot='desc'>
						{{$t('orderDetail.wait_express_text')}}
					</div>
				</u-steps-item>
				<u-steps-item :title="$t('orderDetail.wait_confirm')" v-if="detail.order_status>2">
					<div class='step_content' slot='desc' style="margin-bottom: 20rpx;">
						<view>{{$t('orderDetail.wait_confirm_text')}}</view>
						<view v-if="shipLists.length>0">
							<view v-for="(item,index) in shipLists" style="margin-top: 30rpx;">
								<view style="font-size: 22rpx;color:#aaa;">{{item.create_time}}</view>
								
								<view 
								style="font-size: 26rpx;margin-top:  10rpx;color:#999;">
								{{item.note}}</view>
							</view>
						</view>
					</div>
				</u-steps-item>
				<view class='btns2' v-if="detail.order_status==3" style="margin:10px;">
					<view class='saveBtn' style="color:#000" @click='endorder(detail.order_id)'>{{$t('orders.orderconfirm')}}</view>
				</view>
				<u-steps-item :title="$t('orderDetail.finish')" v-if="detail.order_status>3">
					<div class='step_content' slot='desc'>
						{{$t('orderDetail.finish_text')}}
					</div>
				</u-steps-item>
			</u-steps>
			<!-- <view class='expantBtn dFlex jCenter_aCenter' @click='changeExpand'>
				<u-icon :name="expand?'arrow-up':'arrow-down'"
					:label='expand ? $t("orderDetail.putAway") : $t("orderDetail.open")' labelSize='12px' size='12px'
					labelPos='left'></u-icon>
			</view> -->
		</view>
		<view class='orderId dFlex jBetween_aCenter'>
			<view class='label'>{{$t('orderDetail.total_amount')}} <text style="margin-left: 20px;">SAR {{detail.total_amount}}</text></view>
		</view>
		<view class='orderId dFlex jBetween_aCenter'>
			<view class='label'>Vat tax <text style="margin-left: 20px;">SAR {{detail.vat_amount}} </text></view>
		</view>
		<view class='orderId dFlex jBetween_aCenter'>
			<view class='label'>{{$t('orderDetail.order_amount')}} <text style="margin-left: 20px;">SAR {{detail.order_amount}}</text></view>
		</view>
		<view class='orderId dFlex jBetween_aCenter'>
			<view class='label'>{{$t('orderDetail.coupon_price')}} <text style="margin-left: 20px;">SAR {{detail.coupon_price}}</text></view>
		</view>
		<view class='shops'>
			<view class='tips'>
				<view class='title1'>{{$t('orderDetail.product_list')}}</view>
				<view class='desc'>{{$t('orderDetail.tips')}}</view>
			</view>
			<view class='list'>
				<view class="shopOne dFlex jStart_aStart" v-for="(item,index) in goodsLists" :key='index'>
					<view class='shopImg imgPublic' @click="goDetail(item)">
						<image :src="item.image" mode="widthFix"></image>
					</view>
					<view class='shopInfo'>
						<view class='shopName' v-if="item.goods_name">{{item.goods_name}}</view>
						<view class='shopName' v-if="item.spec_key_name">{{item.spec_key_name}}</view>
						<view class='shopName' style="font-size: 12px;">{{item.unit}}</view>
						<view class='shopPrice dFlex jStart_aCenter'>
							<view class='newPrice'>SAR<text>{{item.final_price}}</text></view>
							<!-- <view class='oldPrice'>4949</view> -->
							<view class="carIcon dFlex jCenter_aCenter" style="margin-left: 20px;" @click.stop="addCart(item)">
								<u-icon name="../static/menu5_1.png" size='20px'></u-icon>
							</view>
						</view>
						<view>{{$t('goodDetail.count')}} x {{item.goods_num}}</view>
						<view v-if="detail.order_status==4">
							<view style="margin-top:10rpx;display: flex;">
								<u-button @click="comment(item.rec_id)" size="mini"
									 color='#f8e801'>{{$t('orderDetail.post_comment')}}</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<pageBottom></pageBottom>
	</view>
</template>

<script>
	import pageBottom from '@/components/pageBottom.vue';
	export default {
		components: {
			pageBottom
		},
		data() {
			return {
				wuliu: 2,
				expand: false,
				id: '',
				detail: {},
				goodsLists: [],
				shipLists: [],
				kefu_url: '',
				// 待支付弹窗
				addCarDialog: false,
				map:'',
			};
		},
		onLoad(options) {
			this.id = options.id ?? ''
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('pages.orderDetail'),
			})
			this.init()
		},
		methods: {
			async endorder(id) {
				const result = await this.$api('/order/orderconfirm', {
					id: id,
				});
				console.log(result);
				if (result) {
					
					uni.showToast({
						title: result,
						icon: "success"
					})
					this.init()
				}
			}, 
			addCart(item) {
				this.$tools.addCart(item)
			},
			changeExpand() {
				this.expand = !this.expand;
				if (this.expand) { //数组内是全部的物流信息

				} else { //数组内是最新的几条物流信息

				}
			},
			async init() {
				const result = await this.$api('/order/orderinfo', {
					id: this.id
				})
				this.detail = result.info
				this.goodsLists = result.goodslsit
				this.shipLists = result.shiplist ?? []
				this.kefu_url = result.kefu_url
				this.map = result.map;
				if(result.info.order_status==1){
					this.addCarDialog=true;
				}
			},
			comment(rec_id) {
				uni.navigateTo({
					url: '/pages/comment?id=' + this.detail.order_id + '&rec_id=' + rec_id
				})
			},
			payorder(item) {
				uni.navigateTo({
					url: '/pages/pay?id=' + item.order_id+'&amount='+item.order_amount
				})
			},
			goKefu() {
				uni.navigateTo({
					url: '/pages/webview?weburl=' + encodeURIComponent(this.kefu_url)
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: './goodDetail?id=' + item.goods_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.btns2 {
		.saveBtn {
			width: 95%;
			background: $main;
			color: white;
			text-align: center;
			border-radius: 4px;
			padding: 10px 0;
			
		}
	
		width: 100%;
		background: white;
		box-sizing:border-box;
	}
	.addCar {
		.btns {
			.u-button {
				width: 48%;
			}
	
			width: 100%;
			margin-top: 10px;
		}
	
		.shopInfo {
			.shopName {
				width: calc(100% - 48px);
			}
	
			.shopImg {
				width: 40px;
				height: 40px;
				overflow: hidden;
				margin-right: 8px;
			}
	
			flex: 1;
			padding:0;
		}
	
		.carInfo {
			.price {
				font-weight: bold;
				margin-top: 3px;
				white-space: nowrap;
			}
	
			text-align: center;
			width: max-content;
			margin-left: 12px;
		}
	
		width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}
	
	.shops {
		.list {
			.shopOne {
				.shopInfo {
					.shopPrice {
						.oldPrice {
							font-size: 12px;
							margin-left: 12px;
							color: #7e859b;
						}

						.newPrice {
							font-weight: bold;

							text {
								font-size: 16px;
								display: inline-block;
								margin-left: 5px;
							}
						}

						width:100%;
						margin:6px 0;
					}

					.shopName {
						width: 100%;
						display: -webkit-box;
						/* 设置为WebKit内核的弹性盒子模型 */
						-webkit-box-orient: vertical;
						/* 垂直排列 */
						-webkit-line-clamp: 2;
						/* 限制显示两行 */
						overflow: hidden;
						/* 隐藏超出范围的内容 */
						text-overflow: ellipsis;
						/* 使用省略号 */
					}

					width:calc(100% - 112px);
				}

				.shopImg {
					width: 100px;
					margin-right: 12px;
				}

				width:100%;
				padding:15px;
				box-sizing: border-box;
				border-bottom: 5px solid #f7f7fa;
			}

			width:100%;
			border-bottom: 10px solid #f7f7fa;
		}

		.tips {
			.title1 {
				font-weight: bold;
				margin-bottom: 5px;
				font-size: 16px;
				color: #333333;
			}

			width:100%;
			padding: 12px;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			color: #999999;
			font-size: 12px;
		}

		width:100%;
		background:white;
	}

	.wuliu {
		.expantBtn {
			width: 100%;
			padding: 10px 0;
			background: white;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
		}

		width:100%;
		padding:12px 12px 0;
		overflow: hidden;
		box-sizing: border-box;
		margin: 12px 0;
		background:white;
	}

	.address {
		.info {
			.add {
				margin: 5px 0;
			}

			.user {
				color: #666666;
			}

			width:100%;
			font-size: 12px;
		}

		.label {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 8px;
		}

		width:100%;
		padding: 10px 12px;
		box-sizing: border-box;
		background:white;
	}

	.orderId {
		text {
			color: #333333;
			font-weight: bold;
			display: inline-block;
			margin-left: 5px;
			font-size: 14px;
		}

		width:100%;
		padding:8px 12px;
		box-sizing: border-box;
		margin-bottom: 5px;
		background:white;
		font-size: 12px;
		color:#999999;
	}

	page {
		background: #f8f8f8;
	}
</style>